<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
      @exportBtnClick="handleExport"
    />
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #image="scope">
        <el-image
          v-if="scope.row.picture"
          style="width: 60px; height: 60px"
          :src="getPicUrl(scope.row.picture)"
          :preview-src-list="getPicUrlList(scope.row.picture)"
        >
        </el-image>
        <span v-else>无</span>
      </template>
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-money"
          @click="handleViewIncome(row)"
        >
          收益
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-search"
          @click="handleDeviceRealTimeInfo(row)"
        >
          实时信息
        </el-button>
      </template>
    </PageContent>


    <!-- 设备实时信息 -->
    <device-info
      v-if="showDeviceInfo"
      :show.sync="showDeviceInfo"
      :sn="sn"
    ></device-info>
    <!-- 收益明细 -->
    <device-income
      v-if="showIncome"
      :show.sync="showIncome"
      :sn="sn"
    ></device-income>
  </div>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { menus } from "@/config/enum";
import UploadFileImg from "@/components/uploadFileImg/index.vue";
import DeviceInfo from "./deviceInfo.vue";
import DeviceIncome from "./deviceIncome.vue";
import localCache from "@/utils/cache";
export default {
  name: "DeviceList",
  components: {
    DeviceInfo,
    DeviceIncome,
    UploadFileImg,
  },
  mixins: [dialogMixin],
  data() {
    return {
      exportLoading: false,
      showIncome: false,
      fileList: [],
      sn: "",
      menus,
      contentConfig,
      searchFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      showDeviceInfo: false,
      formData: {} // 搜索表单数据

    };
  },
  computed: {
    getPicUrl() {
      return (data) => {
        return JSON.parse(data)[0]?.absolutePath;
      };
    },
    getPicUrlList() {
      return (data) => {
        const arr = JSON.parse(data);
        if (Array.isArray(arr)) {
          return arr.map((item) => item.absolutePath);
        }
      };
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.fileList = [];
      }
    },
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleExport() {
      const url = process.env.VUE_APP_BASE_API;
      this.axios({
        method: "get",
        url: url + "/device-exception/export",
        responseType: "blob",
        params: this.formData,
        headers: {
          Authorization: localCache.getCache("token"),
        },
      }).then((res) => {
        this.$download.excel(res.data, "异常设备.xlsx");
      });
    },
    handleDeviceRealTimeInfo({ sn }) {
      this.sn = sn;
      this.showDeviceInfo = true;
    },
    handleViewIncome({ sn }) {
      this.sn = sn;
      this.showIncome = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.device-static {
  padding: 0 20px;
  margin-top: 20px;
  .icon-point {
    margin-right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: -2px;
    &.icon-point-online {
      background-color: #67c23a;
    }
    &.icon-point-offline {
      background-color: #f56c6c;
    }
  }
}
.name {
  text-align: center;
}
.info {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 30px;
  color: #1d2129;
  text-align: center;
  justify-content: center;
  img {
    margin-right: 8px;
  }
  .unit {
    display: inline-block;
    margin: 6px 0 0 4px;
    font-size: 16px;
  }
}
::v-deep {
  .el-upload-list {
    display: none;
  }
  .el-upload-list__item-name {
    display: none;
  }
}
</style>
